<template>
  <a-page-header
      style="border: 1px solid rgb(235, 237, 240)"
      title="用户注册"
  />
  <a-steps
      progress-dot
      :current="stepCurrent"
      size="small"
      style="margin-top: 30px; margin-left: 240px; width: 1000px"
  >
    <a-step title="用户注册信息"/>
    <a-step title="完善邮箱验证"/>
    <a-step title="注册完成"/>
  </a-steps>
  <div style="margin-top:30px">
    <a-form :model="user" :label-col="labelCol" :wrapper-col="wrapperCol">
      <a-form-item
          label="学号/工号"
          has-feedback
          :validateStatus="type5"
          :help="message5"
      >
        <a-input
            v-model:value="user.user_ident"
            placeholder="请输入学号/工号"
            @change="checkIdent"
        />
      </a-form-item>

      <a-form-item
          label="账号"
          has-feedback
          :validateStatus="type1"
          :help="message1"
      >
        <a-input
            v-model:value="user.user_id"
            placeholder="请输入用户账号"
            @change="checkId"
        />
      </a-form-item>

      <a-form-item
          label="密码"
          has-feedback
          :validate-status="type3"
          :help="message3"
      >
        <a-input-password
            v-model:value="user.user_pwd"
            @change="checkPwd"
            placeholder="请输入密码"
        />
      </a-form-item>

      <a-form-item
          label="确认密码"
          has-feedback
          :validate-status="type2"
          :help="message2"
      >
        <a-input-password
            v-model:value="user.user_pwd2"
            @change="checkPwd2"
            placeholder="请重复密码"
        />
      </a-form-item>

      <a-form-item
          label="用户名称"
          has-feedback
          :validate-status="type4"
          :help="message4"
      >
        <a-input
            v-model:value="user.user_name"
            @change="checkName"
            placeholder="请输入用户名称"
        />
      </a-form-item>

      <a-form-item label="年龄">
        <a-input
            v-model:value="user.user_age"
            @change=""
            placeholder="请输入年龄"
        />
      </a-form-item>
    </a-form>
  </div>

  <a-button
      :disabled="buttonStatus"
      style="margin-left: 400px"
      @click="register"
  >完成注册
  </a-button
  >
</template>
<script setup>
///////////////////////////////////////////////////////////引入
import {reactive, ref} from "vue";
import {post, setLocalToken} from "@/common";
import {useRouter} from "vue-router";
import {get} from "@/common";
import {message} from "ant-design-vue";
////////////////////////////////////////////////////////////变量
const user = reactive({
  user_id: "",
  user_ident: "",
  user_pwd: "",
  user_name: "",
  user_pwd2: "",
  role_id: "",
  user_age: "",
});

const labelCol = {
  span: 4,
};
const wrapperCol = {
  span: 14,
};

const type1 = ref("");
const message1 = ref("");

const type3 = ref("");
const message3 = ref("");

const type2 = ref("");
const message2 = ref("");

const type4 = ref("");
const message4 = ref("");

const type5 = ref("");
const message5 = ref("");

const buttonStatus = ref(false);

const router = useRouter();

////////////////////////////////////////////////////////////

const checkId = () => {
  if (user.user_id.length > 0) {
    type1.value = "success";
    message1.value = "";
  } else {
    type1.value = "error";
    message1.value = "账号不为空";
  }
};


const checkPwd = () => {
  if (user.user_pwd.length >= 6) {
    type3.value = "success";
    message3.value = "";
  } else {
    type3.value = "error";
    message3.value = "密码不少于6位";
  }
};

const checkPwd2 = () => {
  if (user.user_pwd == user.user_pwd2) {
    type2.value = "success";
    message2.value = "";
  } else {
    type2.value = "error";
    message2.value = "两次密码不相同";
  }
};

const checkName = () => {
  if (user.user_name.length > 0) {
    type4.value = "success";
    message4.value = "";
  } else {
    type4.value = "error";
    message4.value = "名称不合法";
  }
};

const checkIdent = () => {
  if (user.user_ident.length > 0) {
    type5.value = "success";
    message5.value = "";
  } else {
    type5.value = "error";
    message5.value = "学号不为空！";
  }
};

const register = () => {
  if (type1.value == "success") {
    if (type3.value == "success") {
      if (type2.value == "success") {
        if (user.user_pwd.length < 6) {
          message.error("密码不得少于6位");
        } else {
          if (
              user.user_id.length == 0 ||
              user.user_name.length == 0 ||
              user.user_ident.length == 0
          ) {
            message.error("请不要留空");
          } else {
            post("/security/Register", user).then((res) => {
              if (res.success) {
                message.success(res.message);
                router.push({path: "/security/RegisteMail"});
              } else {
                message.error(res.message);
              }
              localStorage.setItem("user_id", user.user_id);
            });
          }
        }
      } else {
        message.error(message2.value);
      }
    } else {
      message.error(message3.value);
    }
  } else {
    message.error(message1.value);
  }
};
///////////////////////////////////////////////////
</script>

<style>
</style>